<script setup>
import { ref, watch } from "vue";
import { setConfigBaseUrl, getConfigBaseUrl } from "@/api/tauri";
import ListHeadLine from "@/components/list/ListHeadLine.vue";
import InputListItem from "@/components/list/InputListItem.vue";
import "@material/web/textfield/outlined-text-field.js";
import "@material/web/list/list.js";

const backendUrl = ref(getConfigBaseUrl());
watch(backendUrl, value => {
  setConfigBaseUrl(value);
});
</script>

<template>
  <Teleport to="#wrapper">
    <div class="teleport-view" role="presentation" id="tauri-config-view">
      <md-list>
        <ListHeadLine>后端路径设置</ListHeadLine>
        <InputListItem v-model="backendUrl" placeholder="未设置" type="url">
          <template #headline>后端服务器地址</template>
        </InputListItem>
      </md-list>
    </div>
  </Teleport>
</template>

<style scoped>
#tauri-config-view {
  padding: 32px max(15%, 16px);
}

#tauri-config-view>p {
  display: flex;
  margin-bottom: 16px;
}
</style>
